<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本dom结构</title>
</head>
<body>
<div id="box"> </div>
<button id="btnAdd">添加</button>
<button id="btnRemove">移除</button>
</body>
<script>

    /**
     * ul/ol
     *   ul/ol
     *     li
     *     li
     *   select
     *   table
     *     thead
     *     tbody
     *       tr
     *         td
    * */

    /**
     *  数据驱动
     *     数据 和 模板/结构 分离
    * */

    var box = document.getElementById('box');
    var btnAdd = document.getElementById('btnAdd');
    btnAdd.onclick=btnAddClick;

    var btnAdd = document.getElementById('btnRemove');
    btnAdd.onclick=btnRemoveClick;

    var children =[];

    function btnAddClick () {
       children.push({
           text:'new box'
       })
       render();
    }

    /*渲染函数*/
    function render() {
        /*重新渲染页面*/
        box.innerHTML = "";
        for (var key in children){
            var newBox = document.createElement('div');
            newBox.innerText = children[key].text;
            box.appendChild(newBox);
        }
    }

   function btnRemoveClick(){
        children.pop();
        render();

   }

</script>
</html>